<nz-spin [nzSpinning]="isSpinning" [nzTip]="'正在初始化模块信息...'">
  <section class="in-index" *ngIf="viewType==0 ">
    <!-- <p class="title" *ngIf="showTitile">
      <span>{{componentConfig.ModuleCaption}}</span>
    </p> -->
    <div class="table-operations" style="margin: 32px 0;padding: 0 2%;">
      <button style="background: #ef4954;color: #fff;" nz-button (click)="viewType=1">
        <i class="anticon anticon-plus"></i>
        <span>新增</span>
      </button>
      <button nz-button *ngIf="isHaveCheckedField" [disabled]="!allChecked && !indeterminate " (click)="deleteChecked()">
        <i class="anticon anticon-close-circle-o"></i>
        <span>删除</span>
      </button>
      <button nz-button *ngIf="isNavigation" (click)="goBack()">
        <i class="anticon anticon-rollback"></i>
        <span>返回</span>
      </button>
      <button nz-button (click)="getEntityList()" [nzLoading]="loadingData">
        <i class="anticon anticon-reload"></i>
        <span>刷新</span>
      </button>
      <ng-container *ngFor="let op of MenuOptons">
        <button nz-button (click)="MenuAction(op.urlLink,op.tag)" *ngIf="op.tag!='uploadExcel'">
          <i [class]="op.iconCss" *ngIf="op.iconCss"></i>
          <span>{{op.caption}}</span>
        </button>
        <nz-upload [(nzFileList)]="fileList_uploadExcel" [(ngModel)]="upExcelfile" [nzShowUploadList]=false
          [nzBeforeUpload]="beforeUpload_uploadExcel" *ngIf="op.tag=='uploadExcel'">
          <button nz-button>
            <i class="anticon anticon-upload"></i>
            <span>{{op.caption}}</span>
          </button>
        </nz-upload>
      </ng-container>
      <nz-input-group nzSuffixIcon="anticon anticon-search" style="width: 200px;float: right;" *ngIf="searchCaption">
        <input type="text" nz-input [title]="'请输入'+searchCaption+''" [placeholder]="'请输入'+searchCaption+''" [(ngModel)]="searchVal"
          (keydown.enter)="dataListFilter($event)">
      </nz-input-group>
    </div>
    <nz-table #nzTable #nzFixedHeader nzBordered [nzLoading]="loadingData" [nzFrontPagination]="false" [nzData]="listEntities.entities"
      [nzTotal]="listEntities.recordTotalCount" [(nzPageIndex)]="listEntities.currentPageIndex" (nzPageIndexChange)="getEntityListAsync(true)"
      [(nzPageSize)]="listEntities.pageSize">
      <thead nz-thead>
        <tr>
          <th nzShowCheckbox [(nzChecked)]="allChecked" [nzIndeterminate]="indeterminate" (nzCheckedChange)="checkAll($event)"
            *ngIf="isHaveCheckedField" style="width: 60px;">
          </th>
          <ng-container *ngFor="let formCol of arSystemFormControls">
            <th [nzShowSort]="formCol.canSortable" [(nzSort)]="sortField[formCol.fieldName]" (nzSortChange)="sort(formCol.fieldName,$event)"
              style="text-align: center;" *ngIf="formCol.showInTable">
              <span>{{formCol.fieldCaption}}</span>
            </th>
          </ng-container>
          <th nz-th style="text-align: center;">操作</th>
        </tr>
      </thead>
      <tbody nz-tbody style="text-align: center;">
        <tr nz-tbody-tr *ngFor="let item of nzTable.data">
          <td nzShowCheckbox [(nzChecked)]="item.IsChecked" (nzCheckedChange)="refreshStatus($event)" *ngIf="isHaveCheckedField">
          </td>
          <ng-container *ngFor="let formCol of arSystemFormControls">
            <td nz-td *ngIf="formCol.showInTable">
              <ng-container [ngSwitch]="formCol.fieldType">
                <span *ngSwitchCase="7">{{(item[formCol.fieldName]?item[formCol.fieldName]:'') | cnBoolean |
                  dictionary:formCol.fieldData}}</span>
                <!-- 图片 -->
                <span *ngSwitchCase="10">
                  <img *ngIf="item[formCol.fieldName]" (click)="showImageView(httpService.IP_PORT+item[formCol.fieldName])"
                    [src]="httpService.IP_PORT+item[formCol.fieldName]" class="avatar" style="height: 30px;width: 30px; cursor: pointer; margin: 0 auto;">

                  <img *ngIf="!item[formCol.fieldName]" [src]="httpService.IP_PORT+'/userfiles/userphotos/timg.jpg'"
                    class="avatar" style="height: 30px;width: 30px;margin: 0 auto;">
                </span>
                <!-- upload -->
                <span *ngSwitchCase="11">
                  <a [href]="httpService.IP_PORT+item[formCol.fieldName]" target="_blank">下载文件</a>
                </span>
                <span *ngSwitchCase="13">
                  <span style="width: 30px;height: 30px;background-color: gray;"></span>
                </span>
                <span *ngSwitchDefault>{{item[formCol.fieldName] | dictionary:formCol.fieldData}}</span>
              </ng-container>
            </td>
          </ng-container>

          <td nz-td>
            <ng-container *ngFor="let op of tableOptons">
              <a *ngIf="op.navigatType==0" (click)="navigateCustom(op.urlLink,item[componentConfig.KeyFieldName])">
                <i [class]="op.iconCss" *ngIf="op.iconCss"></i>{{op.caption}}
              </a>
              <a *ngIf="op.navigatType==1" (click)="showModalForComponent(item,op.tag)">
                <i [class]="op.iconCss" *ngIf="op.iconCss"></i>{{op.caption}}
              </a>
            </ng-container>
            <ng-container *ngIf="tableOptons.length>2">
              <br />
            </ng-container>
            <!--修改-->
            <a *ngIf="componentConfig.ButtonSet.Edit" (click)="editEntity(item[componentConfig.KeyFieldName])">
              <i class="anticon anticon-edit"></i>修改
            </a>
            <nz-popconfirm *ngIf="componentConfig.ButtonSet.Dell" [nzTitle]="'确定要删除信息吗？'" (nzOnConfirm)="deleteEntity(item[componentConfig.KeyFieldName])">
              <a nz-popconfirm>
                <i class="anticon anticon-close"></i>删除
              </a>
            </nz-popconfirm>
          </td>
        </tr>
      </tbody>
    </nz-table>
  </section>

  <form nz-form [formGroup]="validateForm" (ngSubmit)="addEntity()" *ngIf="(viewType==1 || viewType==2) ">
    <nz-spin [nzSpinning]="isPending" [nzTip]="'正在执行操作...'">
      <ng-container *ngFor="let formCol of arSystemFormControls">
        <nz-form-item *ngIf="formCol.showInForm">
          <ng-container>
            <!-- 标题 -->
            <nz-form-label [nzSm]="6" [nzXs]="24" [nzRequired]="formCol.isRequired" [nzFor]="formCol.fieldName">{{formCol.fieldCaption}}</nz-form-label>
            <nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback [ngSwitch]="formCol.fieldType">
              <!-- 文本框 -->
              <input nz-input *ngSwitchCase="0" [formControlName]="formCol.fieldName" [id]="formCol.fieldName" />
              <!-- 多行文本 -->
              <input nz-input *ngSwitchCase="2" nzType="textarea" nzRows="5" [formControlName]="formCol.fieldName" [id]="formCol.fieldName" />
              <!-- 多选框 -->
              <nz-checkbox-group *ngSwitchCase="3" [formControlName]="formCol.fieldName">
                <label nz-radio-button *ngFor="let option of formCol.fieldData" [nzValue]="option.dValue">
                  <span>{{option.caption}}</span>
                </label>
              </nz-checkbox-group>
              <!-- radio -->
              <nz-radio-group *ngSwitchCase="4" [formControlName]="formCol.fieldName">
                <label nz-radio-button *ngFor="let option of formCol.fieldData" [nzValue]="option.dValue">
                  <span>{{option.caption}}</span>
                </label>
              </nz-radio-group>
              <!-- select 加载全部 -->
              <ng-container *ngSwitchCase="5">
                <nz-select *ngIf="formCol.loadRemoteDataType==0" style="width: 50%;" [nzPlaceHolder]="'请选择'+ formCol.fieldCaption"
                  [formControlName]="formCol.fieldName" nzAllowClear>
                  <nz-option *ngFor="let option of formCol.fieldData" [nzLabel]="option.caption" [nzValue]="option.dValue">
                  </nz-option>
                </nz-select>
                <nz-select *ngIf="formCol.loadRemoteDataType==1" style="width: 50%;" nzAllowClear [nzPlaceHolder]="'根据填入内容搜索'"
                  [formControlName]="formCol.fieldName" (nzOnSearch)="searchChange($event,formCol.fieldName)"
                  [nzServerSearch]="true" [nzNotFoundContent]="'没有对应内容'" nzShowSearch>
                  <nz-option *ngFor="let option of formCol.fieldData" [nzLabel]="option.caption" [nzValue]="option.dValue">
                  </nz-option>
                </nz-select>
              </ng-container>
              <!-- 头像 -->
              <nz-upload *ngSwitchCase="10" class="avatar-uploader" [nzName]="formCol.fieldName" [nzShowUploadList]="false"
                [nzBeforeUpload]="beforeImgUpload" [nzCustomRequest]="bindingForm">
                <i *ngIf="!focusEntity[formCol.fieldName]" class="anticon anticon-plus avatar-uploader-trigger"></i>
                <img *ngIf="focusEntity[formCol.fieldName]" class="avatar" [src]="(isHaveImage(formCol.fieldName)?httpService.IP_PORT:'')+focusEntity[formCol.fieldName]">
              </nz-upload>
              <!-- 文件上传 -->
              <nz-upload *ngSwitchCase="11" [(nzFileList)]="fileList[formCol.fieldName]" [nzName]="formCol.fieldName"
                [nzBeforeUpload]="beforeUpload" [nzCustomRequest]="bindingFormFile" (nzChange)="handleChange($event,formCol.fieldName)"
                [nzLimit]="1">
                <button nz-button (click)="e_prevent_default($event)">
                  <i class="anticon anticon-upload"></i>
                  <span>选择文件</span>
                </button>
              </nz-upload>
              <!-- 文件上传 -->
              <span *ngSwitchCase="11" >
                <p *ngIf="isHaveImage(formCol.fieldName)">
                  <a [href]="(isHaveImage(formCol.fieldName)?httpService.IP_PORT:'')+focusEntity[formCol.fieldName]"
                    target="_blank">查看文件</a>
                </p>
              </span>
              <!-- 数字 -->
              <nz-input-number *ngSwitchCase="6" style="width: 50%;" [nzStep]="1" [formControlName]="formCol.fieldName"></nz-input-number>
              <!-- toggle -->
              <nz-switch *ngSwitchCase="7" nzCheckedChildren="是" nzUnCheckedChildren="否" [formControlName]="formCol.fieldName">
              </nz-switch>
              <!-- Datetime -->
              <nz-date-picker *ngSwitchCase="8" style="width: 50%;" [formControlName]="formCol.fieldName"></nz-date-picker>
              <!-- 颜色选择器 13 -->
              <input type="color" *ngSwitchCase="13" style="width: 30px;height: 30px;" [formControlName]="formCol.fieldName" />
              <!-- 验证内容 -->
              <nz-form-explain *ngIf="validateForm.controls[formCol.fieldName].dirty&&validateForm.controls[formCol.fieldName].errors">
                <ng-container *ngIf="validateForm.controls[formCol.fieldName].hasError('required')">
                  {{formCol.fieldCaption}}为必填项.
                </ng-container>
                <ng-container *ngIf="validateForm.controls[formCol.fieldName].hasError('maxlength')">
                  {{formCol.fieldCaption}}的最大长度{{formCol.maxLength}}.
                </ng-container>
                <ng-container *ngIf="validateForm.controls[formCol.fieldName].hasError('minlength')">
                  {{formCol.fieldCaption}}的最小长度{{formCol.minLength}}.
                </ng-container>
                <ng-container *ngIf="validateForm.controls[formCol.fieldName].hasError(formCol.fieldName)">
                  内容已经存在.
                </ng-container>
              </nz-form-explain>

            </nz-form-control>
          </ng-container>
        </nz-form-item>
      </ng-container>
      <nz-form-item nz-row>
        <nz-form-control nz-col [nzSpan]="14" [nzOffset]="6">
          <button nz-button class="login-form-button" [nzType]="'primary'">保存</button>
          <button nz-button class="login-form-button" (click)="viewType=0">取消</button>
        </nz-form-control>
      </nz-form-item>
    </nz-spin>
  </form>

  <nz-modal [nzVisible]="preViewImage.showImageModal" [nzContent]="modalContent" [nzFooter]="null" (nzOnCancel)="preViewImage.showImageModal=false">
    <ng-template #modalContent>
      <img [src]="preViewImage.imageModalUrl" [ngStyle]="{ 'width': '100%' }" />
    </ng-template>
  </nz-modal>
</nz-spin>
